<template>
    <view :class="'header flex_header ' + (appBoolean ? 'huoniao_iOS ' : '')  + (platForm != 'web' || (appBoolean && (!isAndroid || !appFullscreen)) ? 'bgWhite ' : ''  )" >
        <view class="h-back" @click="backFn" v-if="showBack">
            <image :src="`${masterDomain}/static/images/header_back.png?v=${imgVersion}`" mode="aspectFit"></image>
        </view>
        <view class="modBox " v-if="!showBack">
            <!-- mod && modName && platForm != 'mp-weixin' -->
            <view class="modShow" @click="showSlidePop"  v-if=" platForm == 'mp-toutiao' || (platForm == 'web' && appBoolean && (!isAndroid || !appFullscreen))">
                <view class="modName">{{ modName || "加载中..."}}</view>
                <view class="icon"><image :src="imgpath + 'arr_grey.png?' + imgVersion" alt="" mode="aspectFill"></image></view>
            </view>
        </view>
        <view class="searchBox" >
            <view class="icon">
                <image :src="imgpath + 'search_icon.png?v=' + imgVersion" alt="" mode="aspectFill"></image>
            </view>
            <view class="inp">
                <input type="text" ref="inp" :focus="inpFocus" @focus="inputFocus" @blur="inputBlur" :placeholder="placeholder" v-model="title" placeholder-style="color:#B6B7BF;" @confirm="toSearch" >
            </view>
           <view class="icon delIcon" @touchend.prevent="clearSearch()" v-if="title"><image :src="`${globalData.imgStaticPath}/miniprograme/job/clear_icon.png?v=${imgVersion}`" alt="" mode="aspectFill"></image></view>
        </view>
        <view class="modBox" >
            <view  class="modShow" @click="showSlidePop" v-if="platForm == 'web' && (!appBoolean || (isAndroid && appFullscreen))">
                <view class="modName">{{ modName || "加载中..."}}</view>
                <view class="icon"><image :src="imgpath + 'arr_grey.png?' + imgVersion" alt="" mode="aspectFill"></image></view>
            </view>
        </view>
    </view>
</template>

<script>
    const app = getApp();
    export default {
        data(){
            return {
                title:'', //搜索关键字
                globalData:app.globalData,
                platForm:app.globalData.platForm,
                imgpath:app.globalData.imgPath + '/member/order/',
                masterDomain:app.globalData.masterDomain,
                imgVersion:app.globalData.imgVersion,
                appBoolean:app.globalData.platForm == 'web' && app.globalData.appBoolean ? true :false,
                isAndroid:false,
                isFocus:false,
            }
        },
        props:{
            showPop:{
                type:Boolean,
                default:false,
            },
            mod:{
                default:'',
                type:String
            },
            showBack:{
                default:false,
                type:Boolean
            }, //是否显示后退按钮  只有web端没有携带mod参数时才显示
            modName:{
                default:'',
                type:String
            },
            placeholder:{
                default:'',
                type:String,
            },
            inpFocus:{
                default:false,
                type:Boolean,
            },
            appFullscreen:{
                default:false,
                type:Boolean,
            },
        },
        emits:['showpop','searchkey','inpfocus'],
        mounted() {
            if(this.platForm == 'web' && this.appBoolean && window.Android){
                this.isAndroid = true
            }
        },
        methods:{
            backFn() { //后退函数
				if (this.appBoolean) { //APP
					window.setupWebViewJavascriptBridge(function(bridge) {
						bridge.callHandler("goBack", {}, function(responseData) {});
					})
					return false
				} else {
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) { //正常后退
						uni.navigateBack({
							delta: 1
						});
					}else{
                        window.history.go(-1)
                    }
				}
			},

            showSlidePop(){
                this.$emit('showpop',true)
            },

            toSearch(){ //搜索
                // console.log(this.title)
                this.$emit('searchkey',this.title)
            },

            inputFocus(){
                this.isFocus = true
                this.$emit('inpfocus')
            },
            inputBlur(){
               setTimeout(() => {
                this.isFocus = false
               }, 300);
            },

            clearSearch(){
                const that = this;
                that.title = ''
                if(!that.isFocus){
                    that.$emit('searchkey',that.title)
                }else{
                    setTimeout(() => {
                        this.$nextTick(function() {
                            that.$emit('inpfocus')
                        });
                    }, 400);
                }
            }
        }
    }
</script>

<style scoped>
    
    @import './order_header.css';
</style>